<template>
    <header>
        <div>
            <h4>支付宝余额:</h4><el-input v-model="weichatAlipay.alipay" type="text" readonly />
        </div>
        <div>
            <h4>微信余额:</h4><el-input v-model="weichatAlipay.weichat" type="text" readonly/>
        </div>
    </header>
    <div>
        <el-button @click="createObj" round>添加银行卡</el-button>
        <el-table :data="MyAssetdata" style="width: 80%">
            <el-table-column fixed prop="cardName" label="银行卡" width="100" />
            <el-table-column prop="money" label="金额" width="60"/>
        </el-table>
    </div>
    <div>
        <el-table :data="MyInvestmentdata" style="width: 50%">
            <el-table-column fixed prop="name" label="产品编号" width="100" />
            <el-table-column prop="remarks" label="产品名" />
            <el-table-column prop="number" label="持有数量" />
            <el-table-column prop="unitPrice" label="平均购入价格" />
        </el-table>
    </div>

    <el-dialog v-model="cardDialog">
        <el-form :model="form" label-width="120px">
            <el-form-item label="银行卡号">
                <el-input v-model="form.cardNum" />
            </el-form-item>
            <el-form-item label="所属银行">
                <el-input v-model="form.bankName" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmitCreateCard" round>确定</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script  setup>
import axios from 'axios';
import { ElMessage } from 'element-plus'
import { fromPairs } from 'lodash';
import { onMounted, ref, reactive } from 'vue';

//账户数据
const MyAssetdata = ref([])
const weichatAlipay = ref({
    weichat: null,
    alipay: null,
})

//获取账户数据
let getAssettList = () => {
    axios({
        method: "Get",
        url: "/api/myAsset/listCard",
    }).then((resp) => {
        if (resp.data.code === 200) {
            MyAssetdata.value = resp.data.data
            resp.data.data.forEach(element => {
                console.log(element.weichat)
                console.log(element.alipay)
                weichatAlipay.value.weichat = element.weichat
                weichatAlipay.value.alipay = element.alipay
            });
            console.log(weichatAlipay.value)
            console.log(resp.data);
        }
    })
}


//理财产品数据
const MyInvestmentdata = ref([])
//获取理财数据
let getInvestmentList = () => {
    axios({
        method: "Get",
        url: "/api/myAsset/listInvestment",
    }).then((resp) => {
        if (resp.data.code === 200) {
            MyInvestmentdata.value = resp.data.data
        }
    })
}



//弹窗
const cardDialog = ref(false)
//添加银行卡的表单
const form = reactive({
    cardNum: '',
    bankName: '',
})
const createObj = () => {
    cardDialog.value = true;
}

//添加银行卡
const onSubmitCreateCard = () => {
    axios({
        data:form,
        method: "Post",
        url: "/api/card/create",
    }).then((resp)=>{
        if(resp.data.code == 200){
            ElMessage({
                type: 'success',
                message: '添加成功',
            })
            getAssettList();
        }
    });
}


onMounted(() => {
    getAssettList();
    getInvestmentList();

})
</script>